<!-- 评论 -->
<template>
  <div class="comment-container">
    <Loading v-if="LoadingRef"></Loading>
    <div class="main" v-else>
      <div class="item" v-for="item in evaluateRef.rows" :key="item.id">
        <div class="avatar">
          <Avatar :url="item.avatar" :size="50"></Avatar>
        </div>
        <div class="text">
          <div class="top">
            <div class="nameInfo">
              <span>{{ item.nickName }}</span>
            </div>
            <div class="time"><span>分数: {{ item.fraction }}</span><span class="last">日期: {{ moment(item.time).format("YYYY-DD-MM HH:mm:ss") }}</span></div>
          </div>
          <div class="content">{{ item.comment }}</div>
        </div>
      </div>
    </div>
    <div class="paging"  v-if="!LoadingRef">
      <paging :total="evaluateRef.total" :page="page" :limit="8" :showPage="9" @click="getPage"></paging>
    </div>
  </div>
</template>

<script setup>
import paging from "@/components/paging/index.vue"
import Loading from "@/components/Loading/index.vue";
import Avatar from "@/components/Avatar/index.vue";
import { getEvaluate } from "@/api/user.js";
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store/useUserStore.js";
import { storeToRefs } from "pinia";
import moment from "moment";
const store = useUserStore();
const { readUserInfo } = storeToRefs(store);
const evaluateRef = ref(null); // 远程数据
const LoadingRef = ref(true); // 加载中
const page = ref(1) // 当前页码
const getPage = async (item) =>{
  page.value = item
  await getEvaluateList()
}

const getEvaluateList = async () =>{
  const { data } = await getEvaluate({
    page: page.value,
    limit: 8,
    roomNoId: readUserInfo.value.roomNoId,
  });
  console.log(data);
  evaluateRef.value = data;
  LoadingRef.value = false;
} 

onMounted(async () => {
  await getEvaluateList()
});


</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.comment-container {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 450px;
  .main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    .item {
      margin: 0 10px;
      padding: 15px;
      border-bottom: 1px solid #b4b8bc;
      width: 48%;
      display: flex;
      .avatar{
        flex: 0 0 auto;
        margin-right:10px;
      }
      .text{
        flex: 1 1 auto;
      }
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom:10px ;
      }
      .content {
        font-size: 1em;
      }
      .nameInfo {
        font-size: 20px;
        color: @frameColor2;
        text-shadow: 2px 2px 10px #3b3b3b;
      }
      .time {
        font-size: 14px;
        color: @gray;
        span{
          margin-right: 20px;
          &.last{
            margin-right:0 ;
          }
        }
      }
    }
  }
  .paging{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>